<template>
  <ul class="tab-ul">
    <li v-show="secInfo.thrList.length > 1" class="tab-list" v-for=" (item,index)  in secInfo.thrList"
        :key="index"
        @click="choseActiveItem(item)">
      <div class="tab-item" :class=" { activeItem:activeGoodsClassCode == item.goodsClassCode}">


        <span v-if="item.superScriptStatus"
              style="width: 0.7rem;height:0.7rem; background: #ff2600;line-height: 0.7rem;font-size: 0.55rem;border-radius: 3px;color:white;overflow: hidden;display: inline-block;margin-right: 0.1rem">
          {{item.superScript}}
        </span>
        <span class="tab-item-text">
               {{item.goodsClassName}}
        </span>
      </div>
    </li>
  </ul>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data() {
      return {}
    },
    components: {},
    props: {
      secInfo: {
        type: Object,
        default: () => ({})
      },
      activeGoodsClassCode: {
        type: String,
        default: ''
      }
    },
    methods: {
      choseActiveItem(item) {
        this.$emit('choseThrClassify', item)
      }
    }
  }
</script>

<style scoped>
  .tab-ul {

  }

  .tab-ul {
    /*border-bottom: 1px solid rgb(238, 238, 238);*/
    padding: 0.2rem 0.5rem 0.2rem 0;
    width: 100%;
    display: flex;
    overflow: hidden;
    justify-content: flex-start;
    align-content: space-around;
    flex-wrap: wrap;
  }

  .tab-list {
    width: 33.3%;
    height: 2rem;
    padding: 0.25rem 0;
  }

  .tab-item {
    width: 100%;
    height: 100%;
    font-size: 0.7rem;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(130, 130, 130);
    padding: 0 0.2rem;
  }

  .tab-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    display: inline-block;
  }

  .tab-list:nth-child(3n+1) {
    padding-right: 0.2rem;
  }

  .tab-list:nth-child(3n+2) {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
  }

  .tab-list:nth-child(3n) {
    padding-left: 0.2rem;
  }

  .activeItem {
    color: rgb(0, 130, 0);
    background: rgb(227, 243, 227);
    border: 1px solid rgb(209, 234, 209);
  }
</style>
